Hovering toolbar
Inspired by Dropbox Paper.
Created on January 8|Last edited on January 8
Comment
Select any text and a toolbar will appear allowing you to add inline formatting in bold, italic, strikethrough, or code. It also lets you attach a link to any text.
The toolbar is also used for editing elements. Hover over a link to change its destination. Only one toolbar is ever present at a time.
Every button in the toolbar has a corresponding keyboard shortcut. You can even paste a link right onto your selection as a shortcut!
A lot of details went into making this toolbar usable.
It repositions itself automatically when it's going to be off screen.
The toolbar is meant for the mouse, so it hides when you start typing. But if you make a selection using your keyboard and then move your mouse, it'll appear again.
Slate's default formatting detection is buggy; it sometimes says your selection is bolded when it's only partially bolded. This toolbar fixes that behavior; your selection is considered bold only if all the text in your selection is bold.
Link detection is treated differently. The toolbar considers your selection linked if any text in your selection is linked, making it easier to remove links.
When hovering over a link, the toolbar waits 400ms before appearing, so that it doesn't intrusively pop in and out as you move your cursor around the page.
Once the link editor is opened, you can move your mouse from the link to the editor, but move it anywhere else and the editor will close. Unless you've already clicked on the editor, in which case it'll stay open until you hit enter or escape.
Browsers only support one selection at a time, so when you're inserting a link, the toolbar needs to remember what your selection was while you're typing the link. In the future we may want to add a highlight on the selection so that the user knows that it remembered.
Add a comment